<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MQTT GPS 位置展示</title>
    <!-- 引入 Leaflet 地图库 CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map {
            height: 600px; /* 地图高度 */
            width: 100%;
        }
    </style>
</head>
<body>
    <h2>MQTT GPS 定位器</h2>
    <!-- 地图容器 -->
    <div id="map"></div>

    <!-- 引入 Leaflet 和 MQTT.js -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

    <script>
        // 1. 初始化地图
        const map = L.map('map').setView([0, 0], 2); // 初始显示在 (0,0) 点，缩放等级 2

        // 加载 OpenStreetMap 图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        // 2. 定义一个 Marker，用于显示当前位置
        let marker = L.marker([0, 0]).addTo(map);
        let circle = null; // 可选：添加一个圆圈标识区域

        // 3. 连接到 MQTT 服务器
        const MQTT_BROKER = "ws://broker.emqx.io:8083/mqtt"; // 替换为你的MQTT服务器地址
        const MQTT_TOPIC = "gps/location"; // 替换为你的主题

        const client = mqtt.connect(MQTT_BROKER); // 创建 MQTT 客户端

        client.on('connect', function () {
            console.log("MQTT 已连接");
            client.subscribe(MQTT_TOPIC, function (err) {
                if (!err) {
                    console.log("订阅主题成功:", MQTT_TOPIC);
                } else {
                    console.error("订阅主题失败:", err);
                }
            });
        });

        client.on('message', function (topic, message) {
            console.log(`收到消息 [${topic}]:`, message.toString());

            // 解析消息并更新地图
            try {
                const payload = JSON.parse(message.toString());
                const lat = parseFloat(payload.latitude);  // 纬度
                const lon = parseFloat(payload.longitude); // 经度

                if (!isNaN(lat) && !isNaN(lon)) {
                    // 更新 Marker 位置
                    marker.setLatLng([lat, lon]);
                    map.setView([lat, lon], 16); // 地图定位到新位置，缩放级别13

                    // 可选：添加一个圆圈标识范围
                    if (circle) map.removeLayer(circle); // 移除旧的圆圈
                    circle = L.circle([lat, lon], { radius: 50 }).addTo(map); // 半径 50 米
                } else {
                    console.error("无效的经纬度数据");
                }
            } catch (e) {
                console.error("消息解析错误:", e);
            }
        });

        client.on('error', function (error) {
            console.error("MQTT 连接错误:", error);
        });
    </script>
</body>
</html>